<script lang="ts" setup>
	import { reactive, ref } from "vue";
	import {
		useRouter
	} from 'uni-mini-router'
	import {
		getCurrentInstance
	} from 'vue'
	import {
		onShow,
		onHide,
		onLoad,
		onReachBottom
	} from '@dcloudio/uni-app'
	import {
		userStore
	} from '@/pinia';
	let router = useRouter()
	const userStoreInfo = userStore();
	let userInfo = ref(userStoreInfo.getUserInfo)
	const userRole = ref(userStoreInfo.getUserFlag)
	const {
		proxy,
	} = getCurrentInstance()
	const routerLink = (e) => {
		router.push({
			name: e,
			params: {}
		})
	}
	onShow(() => {
		userStoreInfo.updateUserInfo(userStoreInfo.userInfo.id)
	})
	const tuichu = () => {
		userStoreInfo.loginOut().then(() => {
			uni.showLoading({})
			setTimeout(() => {
				uni.hideLoading()
				router.replaceAll({
					name: 'choseRole',
					params: {}
				})
			}, 600)
		})
	}
	const wxLogin = () => {
		if (userStoreInfo.userInfo.openid) return
		// let platform = uni.getSystemInfoSync().platform;
		// console.log(platform);
		// if (platform == 'ios') return
		uni.login({
			"provider": "weixin",
			"onlyAuthorize": true,
			success: function (event) {
				const { code } = event
				console.log(event);
				proxy.$req('GET', proxy.$api.wxGetToken, {
					code: event.code,
					//0个人1商家2供应商
					memberType: uni.getStorageSync('roleFlag'),
					//bindType      0登录注册1绑定
					bindType: 1,
					memberId: userStoreInfo.getUserInfo.id
				}).then((res) => {
					uni.showToast({
						title: res.message,
						icon: 'none'
					})
					console.log(res, 'weix');
					if (res.success && res.result.flag == 1) {
						userStoreInfo.updateUserInfo(userStoreInfo.userInfo.id)
					}
				})
			},
			fail: function (err) {
				console.log(err);
				// 登录授权失败
				// err.code是错误码
			}
		})
	}
	const confirmDie = () => {
		proxy.$req('GET', proxy.$api.zhuxiaoStatus, {
			memberId: userStoreInfo.getUserInfo.id
		}).then((res) => {
			if (res.success) {
				uni.$u.toast(res.message)
				nowDie()
			} else {
				uni.$u.toast(res.message)
			}
		})
	}
	const nowDie = () => {
		uni.showModal({
			title: '注销申请',
			content: '是否确认注销账号',
			success: function (res) {
				if (res.confirm) {
					console.log('用户点击确定');
					proxy.$req('PUT', proxy.$api.zhuxiaoNow, {}).then((res) => {
						uni.$u.toast(res.message)
					})
				} else if (res.cancel) {
					console.log('用户点击取消');
				}
			}
		});
	}
</script>
<template>
	<view class="maTop" @click="routerLink('setUserInfo')">
		<view class="mal">
			<image :src="userStoreInfo.userInfo.avatar" v-if="userStoreInfo.userInfo.avatar" mode=""></image>
			<image src="../../../static/logo.png" v-else mode=""></image>
		</view>
		<view class="mam">
			<text v-if="userStoreInfo.userInfo.nickname">{{ userStoreInfo.userInfo.nickname }}</text>
			<text v-else @click="routerLink('choseRole')">点击登录</text>
			<text>{{ userStoreInfo.userInfo.phone }}</text>
		</view>
		<view class="mar">
			<u-icon name="arrow-right"></u-icon>
		</view>
	</view>
	<view class="funcBox">
		<view class="function" @click="routerLink('forget')">
			<text>修改密码</text>
			<u-icon name="arrow-right"></u-icon>
		</view>
		<!-- <view class="function">
			<text>支付设置</text>
			<u-icon name="arrow-right"></u-icon>
		</view> -->
		<view class="function" @click="wxLogin">
			<text>绑定微信</text>
			<view class="r-flex-center-center">
				<text style="font-size: 26rpx;">{{ userStoreInfo.userInfo.openid?'已绑定':'待绑定' }}</text>
				<u-icon name="arrow-right"></u-icon>
			</view>
		</view>
		<view class="function" @click="routerLink('paySetting')">
			<text>支付设置</text>
			<view class="r-flex-center-center">
				<text style="font-size: 26rpx;"></text>
				<u-icon name="arrow-right"></u-icon>
			</view>
		</view>
		<view class="function" @click="routerLink('addressManage')">
			<text>地址管理</text>
			<u-icon name="arrow-right"></u-icon>
		</view>
		<!-- <view class="function">
			<text>客服中心</text>
			<u-icon name="arrow-right"></u-icon>
		</view> -->
		<view class="function" @click="confirmDie">
			<text>申请注销</text>
			<view class="r-flex-center-center">
				<text style="font-size: 26rpx;"></text>
				<u-icon name="arrow-right"></u-icon>
			</view>
		</view>
	</view>
	<view class="function2" style="margin-top: 150rpx;" @click="tuichu">
		<text>切换账号</text>
	</view>
	<view class="function2" @click="tuichu">
		<text>退出账号</text>
	</view>
</template>
<style lang="scss">
	page {
		background-color: #FAFAFA;
	}

	view {
		box-sizing: border-box;
	}

	.maTop {
		width: 686rpx;
		height: 170rpx;
		margin: 0 auto 30rpx;
		padding: 0 30rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		background: #FFFFFF;
		box-shadow: 8rpx 8rpx 32rpx 0rpx rgba(0, 0, 0, 0.04);
		border-radius: 24rpx;
		border: 2rpx solid #FFFFFF;

		.mal {
			image {
				width: 120rpx;
				height: 120rpx;
				border-radius: 70rpx;
			}
		}

		.mam {
			width: 450rpx;
			height: 90rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			align-items: flex-start;
		}

		.mar {
			height: 90rpx;
			display: flex;
			align-items: center;
		}
	}

	.funcBox {
		width: 686rpx;
		background: #FFFFFF;
		box-shadow: 8rpx 8rpx 32rpx 0rpx rgba(0, 0, 0, 0.04);
		border-radius: 24rpx;
		border: 2rpx solid #FFFFFF;
		margin: 20rpx auto;
	}

	.function {
		width: 686rpx;
		padding: 0 30rpx;
		height: 100rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.function2 {
		width: calc(100% - 60rpx);
		padding: 0 30rpx;
		height: 100rpx;
		background: #FFFFFF;
		box-shadow: 8rpx 8rpx 32rpx 0rpx rgba(0, 0, 0, 0.04);
		border-radius: 24rpx;
		border: 2rpx solid #FFFFFF;
		margin: 20rpx auto;
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>